<template>
    <div id="cart">
        
        <div class="cart-box">
            <h2>MY CART</h2>
            <div class="cart-box-container">
                <div class="cart-list-haeder">
                    <div class="cart-list-header-left">ITEMS</div>
                    <div class="cart-list-header-right">
                        <div>PRICE</div>
                        <div>QUANTITY</div>
                        <div>SUBTOTAL</div>
                        <div>EDIT</div>
                    </div>
                </div>
                <div class="cart-list-box">
                    <myCart 
                        v-for="(item,index) in cartList"
                        :key="index"
                        :item="item"
                        />
                </div>
            </div>
            <div class="cart-box-bottom">
                <div class="bottom-left">
                    <input type="checkbox" :checked="allSelected" @click="onClickAllSelect">全选
                    <span>Select all</span>
                </div>
                <div class="bottom-right">
                    <div>Item total：<span style="color:red;">{{totalPrice | filterPrice}}</span></div>
                    <el-button type="danger">CHECKOUT</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import myCart from '@/components/myCart.vue'
export default {
    components:{
        myCart
    },
    computed: {
        // 加入购物车数据
        cartList:function(){
            return this.$store.state.cartModule.cartList;
        },
        // 全选
        allSelected:function(){
            return this.$store.state.cartModule.allSelected;
        },
        // 总价
        totalPrice:function(){
            return this.$store.getters['cartModule/totalPrice'];
        }
    },
    methods: {
        // 全选框
        onClickAllSelect(event){
            var checked = event.target.checked;
            this.$store.commit("cartModule/CHANGE_ALL_SELECTED",checked);
        },
    },
    filters:{
        filterPrice:function(price){
            return "￥" + " " + price.toFixed(2)
        }
    }
}
</script>

<style lang="scss">
#cart{
    width:100%;
    height:100vh;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #F5F7FB;
    .cart-box{
        width:88%;
        height:90%;
        background-color: #F5F7FB;
        .cart-box-container{
            width:100%;
            height:65%;
            background-color: #fff;
            border-bottom:1px solid lightgrey;
            display: inline-flex;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            .cart-list-haeder{
                width:100%;
                height:12%;
                color:white;
                background-color: #5F5F5F;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                .cart-list-header-left{
                    width:40%;
                    height:100%;
                    // border:1px solid red;
                    display: inline-flex;
                    justify-content: flex-start;
                    align-items: center;
                    text-indent: 2em;
                }
                .cart-list-header-right{
                    width:60%;
                    height:100%;
                    // border:1px solid red;
                    display: inline-flex;
                    justify-content: space-around;
                    align-items: center;
                }
            }
            .cart-list-box{
                width:100%;
                height:88%;
                // border:1px solid red;
                overflow-Y:scroll;
            }
        }
        .cart-box-bottom{
            width:100%;
            height:10%;
            background-color: #fff;
            border:1px solid lightgrey;
            margin-top:15px;
            display: inline-flex;
            justify-content:space-between;
            align-items: center;
            .bottom-left{
                input{
                    margin:0 18px;
                }
            }
            .bottom-right{
                display: inline-flex;
                justify-content:center;
                align-items: center;
                .el-button{
                    margin-left: 20px;
                }
            }
        }
    }
}
</style>